/*
 * @Author: your name
 * @Date: 2021-04-09 06:29:24
 * @LastEditTime: 2021-04-10 13:32:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my-app-koa\client\src\components\dashboard\Dashboard.js
 */
import React, { Component } from 'react'
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getCurrentProfile, deleteAccout } from '../../actions/profileActions';
import Spinner from '../../common/Spinner'
import ProfileActives from './ProfileActives'
import Experience from './Experience';
import Education from './Education';
import PropTypes from 'prop-types';


class Dashboard extends Component {
    componentDidMount() {
        // 获取当前用户信息
        this.props.getCurrentProfile()
    }
    // 删除用户数据
    onDeleteClick = () => {
        this.props.deleteAccout()
    }
    render() {
        const { user } = this.props.auth
        const { profile, loading } = this.props.profile
        let dashboardContent;
        if (!loading && profile === null) {
            dashboardContent = <Spinner />
        } else {
            if (profile && Object.keys(profile).length > 0) {
                dashboardContent = (
                    <div>
                        <p className="lead text-muted">
                            Welcome <Link to={`/profile/${profile.handle}`}>{user.name}</Link>
                        </p>

                        <ProfileActives />

                        {/* 教育经历 & 个人履历 */}
                        {profile.experience ? <Experience experience={profile.experience} /> : ''}
                        {profile.education ? <Education education={profile.education} /> : ''}

                        {/* 删除账户按钮 */}
                        <div style={{ marginBottom: '60px' }} />
                        <button
                            onClick={this.onDeleteClick}
                            className="btn btn-danger"
                        >删除当前账户</button>
                    </div>
                )
            } else {
                dashboardContent = (
                    <div>
                        <p className="lead text-muted">欢迎 {user.name}</p>
                        <p>没有任何相关的个人信息, 请添加一些您的个人信息</p>
                        <Link className="btn btn-lg btn-info" to="/create-profile">创建个人信息</Link>
                    </div>
                )
            }
        }
        return (
            <div>
                {dashboardContent}

            </div>
        )
    }
}
Dashboard.propTypes = {
    getCurrentProfile: PropTypes.func.isRequired,
    deleteAccout: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    profile: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
    auth: state.auth,
    profile: state.profile
})

export default connect(mapStateToProps, { getCurrentProfile, deleteAccout })(Dashboard)
